<template>
  <div>
    <Tabs :tabs="tabs" @tabsItemChange="onTabsItemChange">
  <view class="collect_main">
    <!-- tips -->
    <view class="collect_title">
      <text class="collect_tips active">全部</text>
      <text class="collect_tips">热卖</text>
      <text class="collect_tips">即将上线</text>
    </view>
    <!-- 内容区 -->
    <view class="collect_content">
      <view class="collect_main">
        <!-- 每项 -->
        <view class="collect_item" v-for="(item,index) in collectList" :key="index">
          <!-- 图片 -->
          <navigator class="collect_pic" url="">
            <image mode="widthFix" :src="item.goods_small_logo"></image>
          </navigator>
          <!-- 商品信息 -->
          <view class="collect_info">
            <view class="goods_name">{{item.goods_name}}</view>
              <view class="goods_price">${{item.goods_price}}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</Tabs>
  </div>
</template>

<script>
import Tabs from '@/components/tabs'

export default {
  data() {
    return {
      tabs: [
      { id: 0, value: '商品收藏', isActive: true },
      { id: 1, value: '店铺收藏', isActive: false },
      { id: 2, value: '喜欢', isActive: false },
      { id: 3, value: '浏览足迹', isActive: false }
    ],
    collectList: []
    }
  },
  onLoad: function (options) {
    console.log(options);
  },
  onTabsItemChange(index) {
    this.tabs.forEach((v, i) => {
      i === index ? v.isActive = true : v.isActive = false
    })
  },
  onShow() {
    const collectList = wx.getStorageSync("collectList");
    this.setData({ collectList })
  }
}
</script>

<style lang='less' scope>
/* pages/order/order.wxss */
.order_wrap {
  .order_item {
    padding: 20rpx;

    .order_row {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10rpx 0;

      .left {
        flex: 2;
      }

      .right {
        flex: 5;
        text-align: right;
      }

      .price {
        color: var(--themeColor);
        font-size: 32rpx;
        font-weight: 600;
      }
    }
  }
}

.collect_main {
  background-color: #eee;

  .collect_title {
    padding: 40rpx 0;

    .collect_tips {
      padding: 15rpx;
      border: 1rpx solid #eee;
      margin-left: 15rpx;
      background-color: #fff;
    }

    .active {
      border: 1rpx solid var(--themeColor);

    }
  }

  .collect_content {

    .collect_main {
      width: 100%;

      .collect_item {
        padding: 10px;
        display: flex;
        border-bottom: 1px solid #ccc;
        background-color: #fff;

        .collect_pic {
          flex: 2;
          display: flex;
          flex-direction: column;
          justify-content: center;

          image {
            width: 80%;
          }
        }

        .collect_info {
          flex: 4;
          display: flex;
          // 上下排
          flex-direction: column;
          justify-content: space-around;
          align-items: center;

          // 上 - 名字
          .goods_name {
            display: -webkit-box;
            overflow: hidden;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            color: #666;
          }

          // 价格数字
          .goods_price {
            color: var(--themeColor);
            font-size: 34rpx;
            width: 100%;
          }
        }
      }

    }
  }
}
</style>